@extends('layout.master')

@section('content-header')
    <h1>Kipem</h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li><a href="{{ URL::route('detail_kipems.index') }}"></a><i class="fa fa-file"></i> Kipem</li>
        <li class="active"><i class="fa fa-plus-square"></i> Tambah</li>
    </ol>
@stop

@section('content')
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-body table-responsive">
				{{ Form::open(array('route'=>array('detail_kipems.store'), 'method'=>'POST', 'class'=>'form-horizontal', 'role'=>'form')) }}
					{{Form::hidden('user_id', Auth::user()->id)}}
					<div class="form-group {{ $errors->has('provinsi_id') ?  'has-error' : '' }}">
						<label class="col-sm-2 control-label">Provinsi</label>
						<div class="col-sm-10">
							<div class="input-group">
								<span class="input-group-btn">
									<button class="btn btn-default pilihProvinsi" type="button"><i class="fa fa-plus fa-1x"></i></button>
								</span>
								{{Form::hidden('provinsi_id', null, array('class'=>'form-control provinsi_id'))}}
								{{Form::text('provinsi_nama', null, array('class'=>'form-control provinsi_nama','readonly'=>'readonly'))}}
							</div>
						</div>
					</div>
					<div class="form-group {{ $errors->has('lama_berlaku') ?  'has-error' : '' }}">
						<label class="col-sm-2 control-label">Lama Berlaku</label>
						<div class="col-sm-10">
							{{Form::text('lama_berlaku', null, array('class'=>'form-control'))}}
						</div>
					</div>
					<div class="form-group {{ $errors->has('satuan_berlaku') ?  'has-error' : '' }}">
						<label class="col-sm-2 control-label">Satuan Berlaku</label>
						<div class="col-sm-10">
							{{Form::select('satuan_berlaku', array(''=>'- - Pilih Satuan Berlaku - -','1'=>'Hari','2'=>'Bulan','3'=>'Tahun'), null, array('class'=>'form-control'))}}
						</div>
					</div>
					<div class="form-group {{ $errors->has('harga') ?  'has-error' : '' }}">
						<label class="col-sm-2 control-label">Harga</label>
						<div class="col-sm-10">
							{{Form::text('harga', null, array('class'=>'form-control'))}}
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							{{ HTML::decode(link_to_route('detail_kipems.index', '<i class="fa fa-rotate-left"></i> Kembali', null, array('class'=>'btn btn-primary'))) }}
							{{ HTML::decode(Form::button('<i class="fa fa-refresh"></i> Reset', array('class'=>'btn btn-success','type'=>'reset'))) }}
							{{ HTML::decode(Form::button('<i class="fa fa-floppy-o"></i> Save', array('class'=>'btn btn-primary','type'=>'submit'))) }}
						</div>
					</div>
				{{ Form::close() }}
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
</div>
@stop

<div class="modal-container">
	<div class="modal fade modal-wide" id="modalProvinsi">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">Pilih Provinsi</h4>
				</div>
				<div class="modal-body">
					<table id="my-table" class="table table-bordered tbl-pilih" style="font-size: 13px;">
	                    <thead>
	                        <tr class="center">
	                            <th width="10%">#</th>
	                            <th>Provinsi</th>
	                        </tr>
	                    </thead>
	                    <tbody>
	                    </tbody>
	                </table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default btn-nrml" data-dismiss="modal">Tutup</button>
				</div>
			</div>
		</div>
	</div>
</div>

@section('javascript')
<script type="text/javascript">
   	var data;
    $(function() {
		data = $('#my-table').dataTable({
            "aoColumns": [
                { "bSearchable": false, "bSortable": false, "sClass": "text-center" },
                { "bSearchable": true, "bSortable": true, }             
            ],
            "iDisplayLength": 10,
            "bProcessing": true,
            "bServerSide": true,
            "bLengthChange": false,
            "sAjaxSource": "{{ URL::route('kabupatens.data-provinsi') }}",
            "bPaginate": true,
            "bSort": true,
            "bAutoWidth": false,
            "fnDrawCallback": function(oSettings){
	                if(oSettings.bSorted || oSettings.bFiltered){
	                    for(var i =0, iLen = oSettings.aiDisplay.length; i<iLen; i++){
	                        $('td:eq(0)',oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i+1);
	                    }
	                }
	            }
        });

        $(data).bind('draw', function(event) {var i = 1;
            var oSettings = data.fnSettings();
            page = Math.ceil(oSettings._iDisplayStart/oSettings._iDisplayLength);
            $('tbody tr').each(function(index, el) {
                $(el).find('td:eq(0)').html((page*10)+i);
                i++;
            });
        });
    	$('.pilihProvinsi').click(function(event) {
    		$('#modalProvinsi').modal('show');
    	});
    	// $('.modal-container').on('click', '.pilihProvinsi', function(event) {
    	// 	event.preventDefault();
    	// });
    	$('#my-table').on('click', 'tbody tr', function(event) {
    		event.preventDefault();
    		$('.provinsi_id').val($(this).find('span').data('id'));
    		$('.provinsi_nama').val($(this).find('span').data('nama'));
    		$('#modalProvinsi').modal('hide');
    	});
    });
</script>
@stop